<template>
  <div class="app">
    <el-row :gutter="20">
      <el-col
        :xs="24"
        :sm="12"
        :md="8"
        :lg="6"
        :xl="1"
        v-for="(item, index) in BiZhiList"
        :key="index"
      >
        <el-image
          :src="item.imageUrl"
          :alt="item.title"
          @click="downs(item.imageUrl, item.title)"
          lazy
        >
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </el-col>
    </el-row>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[24, 36, 48, 60]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import { getPictureByBiZhiClassification } from "@/api/index.js";
export default {
  watch: {
    id(val) {
      // console.log(val);
      this.funGetPictureByBiZhiClassification(val, this.start, this.count);
    },
  },
  props: {
    id: String,
  },
  data() {
    return {
      /**
       * 壁纸列表
       */
      BiZhiList: [],
      /**
       * 当前页码
       */
      currentPage: 1,
      /**
       * 页面数量
       */
      pageSize: 24,
      /**
       * 数据总数
       */
      total: 0,
      /**
       * 从第几幅图开始(用于分页)
       */
      start: 0,
      /**
       * 每次加载的数量
       */
      count: 24,
    };
  },
  methods: {
    /**
     * 通过 cid 获取响应分类的壁纸
     */
    async funGetPictureByBiZhiClassification(cid, start = 0, count = 50) {
      this.BiZhiList = [];
      await getPictureByBiZhiClassification(cid, start, count).then(
        (res) => {
          // 字符串转数字
          this.total = parseInt(res.data.total);
          // console.log(res.data.data);
          let temp = res.data.data;
          temp.map((item, index) => {
            let tempData = {
              id: item.id,
              title: item.utag,
              time: item.create_time,
              imageUrl: item.img_1600_900,
            };
            this.BiZhiList.push(tempData);
          });
        },
        (err) => {
          // for debug
          console.log(err);
        }
      );
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      // 修改当前页面数量
      this.pageSize = val;
      // 壁纸列表置为空
      this.BiZhiList = [];
      // 修改每次加载图片的数量
      this.count = this.pageSize;
      // 修改当前第几页
      this.currentPage = 1;
      // 修改开始加载图片的位置
      this.start = 0;
      // 重新查询数据
      this.funGetPictureByBiZhiClassification(this.id, this.start, this.count);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      // 修改当前第几页
      this.currentPage = val;
      // 壁纸列表置为空
      this.BiZhiList = [];
      // 修改开始加载图片的位置
      this.start = (this.currentPage - 1) * this.pageSize;
      // 重新查询数据
      this.funGetPictureByBiZhiClassification(this.id, this.start, this.count);
    },
    downs(imgsrc, name) {
      this.$confirm(`下载【 ${name}.png 】 ?`, "下载", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.downloadIamge(imgsrc, name);
          this.$message({
            type: "success",
            message: "下载成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消下载",
          });
        });
    },
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
  },
  created() {},
  mounted() {
    this.funGetPictureByBiZhiClassification(this.id, this.start, this.count);
  },
};
</script>

<style></style>
